<!doctype html>
<html lang="en">

<head>
  <title>Vipster</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">

  <link rel="icon" type="image/png" href="../images/favicon.png">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
  <link href="styles/styles.css" rel="stylesheet">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div id="controls">
        <div id="controls__bar">
          <button id="controls__toggle-btn" class="btn btn-lg" type="button" data-toggle="collapse"
                  data-target="#controls__collapse" aria-expanded="false" aria-controls="controls__collapse"
                  title="Toggle controls">
            <i class="icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                <path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
              </svg>
            </i>
          </button>

          <h1 id="title">Vipster</h1>
          <div id="subtitle" class="text-muted">Visual Periodic STructure EditoR</div>

          <div id="controls__collapse" class="collapse">
            <article class="widget" id="widget-load">
              <header>
                <h2 class="widget_toggle">Molecules</h2>
                <button type="button" title="Toggle" class="widget_toggle widget__toggle-btn">
                  <i class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                      <path fill="currentColor"
                          d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
                    </svg>
                  </i>
                </button>
              </header>

              <div class="widget__body">
                <button class="btn btn-primary btn-mol" id="btnLoad">Load Molecule</button>
                <button class="btn btn-primary btn-mol" id="btnSave">Save Molecule</button>

                <h3>Current molecule</h3>
                <div class="dropdown" id="moleculeDropdown">
                  <button class="btn btn-primary dropdown-toggle"
                      id="mol-list-button"
                      type="button"
                      data-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false">
                    Example Molecule
                  </button>
                  <div class="dropdown-menu" aria-labelledby="mol-list-button">
                    <a class="dropdown-item" href="#" data-idx="0">Example Molecule</a>
                    <a class="dropdown-item" href="#" data-idx="1">Example Crystal</a>
                    <div class="dropdown-divider" style="display: none;"></div>
                  </div>
                </div>
              </div>
            </article>

            <article class="widget" id="widget-step" style="display: none;">
              <header>
                <h2 class="widget_toggle">Steps</h2>
                <button type="button" title="Toggle" class="widget_toggle widget__toggle-btn">
                  <i class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                      <path fill="currentColor"
                          d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
                    </svg>
                  </i>
                </button>
              </header>

              <form class="widget__body">
                <div class="row">
                  <div class="col">
                    <input type="range" class="custom-range" id="stepSlider" min="0" max="0" value="0">
                  </div>
                  <div class="col text-right">
                    <span id="stepCur">1</span> / <span id="stepMax">1</span>
                  </div>
                </div>
              </form>
            </article>

            <article class="widget" id="widget-atom-format">
              <header>
                <h2 class="widget_toggle">Atoms</h2>
                <button type="button" title="Toggle" class="widget_toggle widget__toggle-btn">
                  <i class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                      <path fill="currentColor"
                          d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
                    </svg>
                  </i>
                </button>
              </header>
              <div class="widget__body">
                <form class="mb-3">
                  <div class="input-group">
                    <select class="custom-select" id="atomFmt" title="Atom format">
                      <option value="0">Crystal</option>
                      <option value="1">Alat</option>
                      <option value="2">Ångström</option>
                      <option value="3">Bohr</option>
                    </select>
                  </div>
                </form>

                <div class="table-responsive">
                  <table class="table table-sm table-dark" id="atomList"></table>
                </div>
              </div>
            </article>

            <article class="widget mt-3" id="widget-cell">
              <header>
                <h2 class="widget_toggle">Cell</h2>
                <button type="button" title="Toggle" class="widget_toggle widget__toggle-btn">
                  <i class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                      <path fill="currentColor"
                          d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
                    </svg>
                  </i>
                </button>
              </header>

              <form class="widget__body">
                <div class="custom-control custom-checkbox mb-2">
                  <input type="checkbox" class="custom-control-input" id="cellEnabled">
                  <label class="custom-control-label" for="cellEnabled">Cell enabled</label>
                </div>

                <div class="custom-control custom-checkbox mb-2">
                  <input type="checkbox" class="custom-control-input" id="cellToMol">
                  <label class="custom-control-label" for="cellToMol">Apply to all steps</label>
                </div>

                <!--<div class="custom-control custom-checkbox if-cell">
                  <input type="checkbox" class="custom-control-input" id="cellScale">
                  <label class="custom-control-label" for="cellScale">Scale coordinates with cell</label>
                </div>-->

                <div class="if-cell mt-3" id="cellContainer" style="display: none;">
                  <h3>Cell repetitions</h3>
                  <div class="row mb-3">
                    <div class="col">
                      <div class="input-group" title="Repetition in x direction">
                        <div class="input-group-prepend">
                          <div class="input-group-text">X</div>
                        </div>
                        <input type="number" class="form-control" id="xmult" min="1" value="1"
                            max="255" placeholder="X">
                      </div>
                    </div>
                    <div class="col">
                      <div class="input-group" title="Repetition in y direction">
                        <div class="input-group-prepend">
                          <div class="input-group-text">Y</div>
                        </div>
                        <input type="number" class="form-control" id="ymult" min="1" value="1"
                            max="255" placeholder="Y">
                      </div>
                    </div>
                    <div class="col">
                      <div class="input-group" title="Repetition in z direction">
                        <div class="input-group-prepend">
                          <div class="input-group-text">Z</div>
                        </div>
                        <input type="number" class="form-control" id="zmult" min="1" value="1"
                            max="255" placeholder="Z">
                      </div>
                    </div>
                  </div>

                  <h3>Cell properties</h3>
                  <div class="widget-cell__properties">
                    <div class="input-group mb-2">
                      <div class="input-group-prepend">
                        <div class="input-group-text">Dimension (Å)</div>
                      </div>
                      <input type="number" class="form-control" id="cellDim" min="0.0001"
                             value="1" max="100" step="any">
                    </div>

                  </div>

                  <h3>Cell vectors</h3>
                  <div class="table-responsive">
                    <table class="table table-sm table-dark mb-3" id="cellVec" title="Cell vectors">
                      <thead>
                        <tr>
                          <th>#</th>
                          <th>X</th>
                          <th>Y</th>
                          <th>Z</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr data-idx="0">
                          <td>1</td>
                          <td contenteditable data-idx="0">1</td>
                          <td contenteditable data-idx="1">0</td>
                          <td contenteditable data-idx="2">0</td>
                        </tr>
                        <tr data-idx="1">
                          <td>2</td>
                          <td contenteditable data-idx="0">0</td>
                          <td contenteditable data-idx="1">1</td>
                          <td contenteditable data-idx="2">0</td>
                        </tr>
                        <tr data-idx="2">
                          <td>3</td>
                          <td contenteditable data-idx="0">0</td>
                          <td contenteditable data-idx="1">0</td>
                          <td contenteditable data-idx="2">1</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </form>
            </article>
          </div>
          <button id="vr-enter"
                  class="btn btn-primary btn-vr"
                  aria-hidden="true"
          >Enter VR</button>
          <button id="vr-exit"
                  class="btn btn-primary btn-vr"
                  aria-hidden="true"
          >Exit VR</button>
          <a href=".." class="text-muted" style="display: block; text-align: right;">Return to Homepage</a>
        </div>
      </div>

      <main class="col-lg">
        <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
      </main>
    </div>
  </div>

  <div
      class="modal"
      id="loadFileModal"
      tabindex="-1"
      role="dialog"
      aria-hidden="true"
      data-backdrop="static"
  >
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Load file</h5>
          <button type="button" class="close close-dialog" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="fileDrop" ondragover="event.preventDefault()">
            <p>Drag a file to this area or click to browse for files</p>
          </div>
          <div id="uploadGroup">
            <p id="fileName"></p>
            <div class="input-group">
              <select class="custom-select" id="fileType" title="Input filetype"></select>
              <div class="input-group-append">
                <button id="btnUpload" class="btn btn-primary" type="button">Load file </button>
              </div>
            </div>
          </div>
          <input class="hidden" type="file" id="inputFile" name="file" hidden>
        </div>
      </div>
    </div>
  </div>

  <div
      class="modal"
      id="saveFileModal"
      tabindex="-1"
      role="dialog"
      aria-hidden="true"
      data-backdrop="static"
  >
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Save file</h5>
          <button type="button" class="close close-dialog" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <select class="custom-select" id="saveFileType" title="Input filetype"></select>
            <div class="input-group-append">
              <a id="btnDownload" class="btn btn-primary" type="button">Download file </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
      class="modal"
      id="noWebGL2Modal"
      tabindex="-1"
      role="alert"
      aria-hidden="true"
      data-backdrop="static"
      data-keyboard="false"
  >
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Sorry!</h5>
        </div>
        <div class="modal-body">
          <p>
            It appears your device/browser combination does not support WebGL2.
            Please consider
            <a href="https://caniuse.com/#feat=webgl2">upgrading</a>, or use the
            <a href="https://sgsaenger.github.io/vipster/download.html">desktop client</a>.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
          integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
          crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
          integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"
          integrity="sha256-GMd3rFxMDNnM5JQEpiKLLl8kSrDuG5egqchk758z59g="
          crossorigin="anonymous"></script>

  <script type="text/javascript" src="vipster.js"></script>
  <script type="text/javascript" src="vipster_setup.js"></script>
</body>

</html>
